<template>
  <div class="app-container flex-column">
    <div style="flex: 1;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <div>
          <div class="text-center">
            <userAvatar :user="user" />
          </div>
          <el-form ref="form" :model="user" :rules="rules" label-width="80px">
            <el-form-item label="用户昵称" prop="nick_name">
              <el-input v-model="user.nick_name" maxlength="30" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="user.phonenumber" maxlength="11" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email" maxlength="50" />
            </el-form-item>
            <el-form-item label="所属部门">
              <el-input v-model="user.dept_name" readonly />
            </el-form-item>
            <el-form-item label="所属岗位">
              <el-input v-model="user.post_name" readonly />
            </el-form-item>
            <el-form-item label="所属角色">
              <el-input v-model="user.role_name" readonly />
            </el-form-item>
            <el-form-item label="创建日期">
              <el-input v-model="user.create_time" readonly />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="user.sex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">保存</el-button>
              <el-button type="danger" @click="close">关闭</el-button>
            </el-form-item>
          </el-form>

        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
  import userAvatar from "./userAvatar";
  import store from "@/store";
  import {
    getUserProfile,
    updateUserProfile
  } from "@/api/system/user";

  export default {
    name: "Profile",
    components: {
      userAvatar
    },
    data() {
      return {
        // 表单校验
        rules: {
          nick_name: [{
            required: true,
            message: "用户昵称不能为空",
            trigger: "blur"
          }],
          email: [{
              required: true,
              message: "邮箱地址不能为空",
              trigger: "blur"
            },
            {
              type: "email",
              message: "请输入正确的邮箱地址",
              trigger: ["blur", "change"]
            }
          ],
          phonenumber: [{
              required: true,
              message: "手机号码不能为空",
              trigger: "blur"
            },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ]
        },
        user: {},
        activeTab: "userinfo"
      };
    },
    created() {
      this.getUser();
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;

        });
      },
      submit() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateUserProfile(this.user).then(response => {
              store.commit('SET_NAME', this.user.nick_name);
              this.$modal.msgSuccess("修改成功");
            });
          }
        });
      },
      close() {
        this.$tab.closePage();
      }
    }
  };
</script>
<style scoped>

</style>